<template>
  <div :class="inline ? 'inline' : ''">
    <a-upload
      name="file"
      :headers="{ token: token }"
      :disabled="disabled"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :showUploadList="showList"
      :remove="handleRemove"
      @preview="preview"
      :file-list="fileList"
      @change="handleChanges"
    >
      <a-button v-if="!disabled && fileList.length < limit"> <a-icon type="upload" /> {{ title }} </a-button>
    </a-upload>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fileDownload } from '@/utils/util'
export default {
  computed: {
    ...mapGetters(['token']),
  },
  props: {
    no: {
      //用来区分第几个upload
      type: Number,
      default: 0,
    },
    inline: {
      type: Boolean,
      default: false,
    },
    showList: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1000,
    },
    title: {
      type: String,
      default: '选择文件',
    },
    uploadUrl: {
      type: String,
      default: process.env.VUE_APP_API_BASE_URL + '/sys-center/api/common/upload',
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
    accept: {
      type: String,
      default: '.txt,.jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.zip,.rar',
    },
  },
  data() {
    return {
      fileList: [],
      ids: [],
      fileNames: [],
      hideUpload: false,
    }
  },
  name: 'fileUpload',
  methods: {
    beforeUpload(file) {
      var x = false,
        arr = file.name.split('.')
      if (this.accept.indexOf(arr[arr.length - 1].toLowerCase()) == -1) {
        x = true
      }
      if (x) {
        this.$message.error('格式错误！ 请上传' + this.accept + '格式的文件')
        return false
      }
      if (!this.autoUpload) {
        this.fileList = [...this.fileList, file]
        this.$emit('getFiles', file, this.ids, this.no)
        return false
      }
    },
    handleRemove(file) {
      if (!this.autoUpload) {
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
        this.$emit('getFiles', newFileList, this.ids, this.no)
      }
    },
    handleChanges({ fileList }) {
      if (!this.autoUpload) {
        return
      }
      this.fileList = []
      this.ids = []
      this.fileNames = []
      fileList.forEach((item, index) => {
        if (item.response) {
          // 最后一次走才会有response响应结果
          if (item.response.code != 200) {
            // 上传错误时
            this.$message.error(item.response.msg)
            fileList.splice(index, 1)
            return
          }
        }

        if (!item.status) {
          // 上传格式错误时
          fileList.splice(index, 1)
          return
        }
        if (item.status == 'done' && item.response) {
          // 上传格式正确时
          this.ids.push(item.response.data.accessoryId)
          item.accessoryId = item.response.data.accessoryId
          item.url = item.response.data.previewPath
          this.fileNames.push(item.response.data.accessoryName)
        } else {
          this.ids.push(item.id)
          item.accessoryId = item.id
          this.fileNames.push(item.name)
        }
      })
      this.fileList = [...fileList]
      this.$emit('getFiles', this.fileList, this.ids, this.no)
    },
    preview(item) {
      // 根据文件的后缀进行预览或是下载操作
      if (item.url) {
        fileDownload(item.name, item.url)
      }
    },
    inits(fileList) {
      if (!fileList || fileList.length == 0) {
        return
      }
      var arr = []
      this.ids = []
      this.fileNames = []
      fileList.forEach((item) => {
        arr.push({
          url: item.previewPath,
          name: item.accessoryName,
          id: item.accessoryId,
          status: 'done',
          uid: item.accessoryId,
        })
        this.ids.push(item.accessoryId)
        this.fileNames.push(item.accessoryName)
      })
      this.fileList = arr
      this.$emit('getFiles', this.fileList, this.ids, this.no)
    },
    clears() {
      this.fileList = []
      this.ids = []
      this.fileNames = []
    },
  },
  mounted() {},

  watch: {},
}
</script>